﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>查询列表</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table-fixed-columns.css"/>
    <link rel="stylesheet" href="../css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css"/>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.js"></script>
    <script src="../js/bootstrap-table-fixed-columns.js"></script>
    <script src="../js/bootstrap-datetimepicker.min.js"></script>
    <script src="../js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../js/bootstrap-select.min.js"></script>
    <script src="../js/moment-with-locales.min.js"></script>
    <script src="../js/FileSaver.min.js"></script>
    <script src="../js/xlsx.core.min.js"></script>
    <script src="../js/tableExport.js"></script>
    <script src="../js/bootstrap-table-export.js"></script>
</head>
<style>
    /*.table {table-layout:fixed;}*/
</style>
<script type="text/javascript">
    $(function () {
        search();
        yearComponents();
        selectDateType();
    })

    //统计类型组件
    function selectDateType() {
        $('#selectType').on('changed.bs.select', function (e) {
            var value = $('#selectType').val();
            if (value == 1) {
                $("#dataTable1").css('display', 'block');
                $("#dataTable2").css('display', 'none');
                $("#dataTable3").css('display', 'none');
                $("#dataTable4").css('display', 'none');
                $('#datetimepicker1').datetimepicker('remove');
                $('#datetimepicker2').datetimepicker('remove');
            } else if (value == 2) {
                $("#dataTable1").css('display', 'block');
                $("#dataTable2").css('display', 'block');
                $("#dataTable3").css('display', 'none');
                $("#dataTable4").css('display', 'none');
                $('#datetimepicker1').datetimepicker('remove');
                $('#datetimepicker2').datetimepicker('remove');
            } else if (value == 3) {
                $("#dataTable1").css('display', 'block');
                $("#dataTable2").css('display', 'none');
                $("#dataTable3").css('display', 'block');
                $("#dataTable4").css('display', 'none');
                $('#datetimepicker1').datetimepicker('remove');
                $('#datetimepicker2').datetimepicker('remove');
            } else if (value == 4) {
                $("#dataTable1").css('display', 'none');
                $("#dataTable2").css('display', 'none');
                $("#dataTable3").css('display', 'none');
                $("#dataTable4").css('display', 'block');
                $('#datetimepicker1').datetimepicker('remove');
                $('#datetimepicker2').datetimepicker('remove');
                dateInterval();
            }
        });
    }

    function getSelectByType() {
        var type = $('#selectType').val();
        if(type==='1'){
            var year = $('#date').val();
            getColumns(type,year,'');
        }else if(type==='2'){
            var year = $('#date').val();
            var quarter = $('#selectQuarter').val();
            getColumns(type,year,quarter);
        }else if(type==='3'){
            var year = $('#date').val();
            var month = $('#selectMonth').val();
            getColumns(type,year,month);
        }else if(type==='4'){
            var begdate = $('#date1').val();
            var enddate = $('#date2').val();
            getColumns(type,begdate,enddate);
        }
    }

    //年份组件
    function yearComponents() {
        $('#datetimepicker').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy',//显示格式
            minView: 'decade',//设置只显示到年
            startView: 'decade',
            maxViewMode: 2,
            minViewMode: 2,
            initialDate: new Date(),
            autoclose: true,//选中自动关闭
            locale: moment.locale('zh-cn')

        });
    }

    //日期区间组件
    function dateInterval() {
        var picker1 = $('#datetimepicker1').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
            locale: moment.locale('zh-cn')
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
            locale: moment.locale('zh-cn')
        });
        //动态设置最小值
        picker1.on('dp.change', function (e) {
            picker2.data('DateTimePicker').minDate(e.date);
        });
        //动态设置最大值
        picker2.on('dp.change', function (e) {
            picker1.data('DateTimePicker').maxDate(e.date);
        });
    }

    //查询按钮
    function search() {
        $("#search-button").click(function () {
            $("#table").bootstrapTable('destroy');
            getSelectByType();
            $('#table').bootstrapTable(('refreshOptions'),{pageSize:10}); // 很重要的一步，刷新url！
        })
    }

    function getColumns(type,param1,param2) {
        let columns = [];
        columns.push({
            field: 'index',
            title: '序号',
            align: 'center', // 居中显示
            width: 20,
        });
        columns.push({
            field: 'departmentname',
            title: '部门名称',
            align: 'center', // 居中显示
            width: 400,
        });
        if (type === '1') {
            columns.push({
                field: 'counts',
                title: param1+'年',
                align: 'center', // 居中显示
                width: 400,
            });
        } else if (type === '2') {
            if(param2 !=='0'){
                columns.push({
                    field: 'quartercount'+param2,
                    title: '第'+param2+'季度',
                    align: 'center', // 居中显示
                    width: 400,
                });
            }else {
                columns.push({
                    field: 'quartercount1',
                    title: '第1季度',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'quartercount2',
                    title: '第2季度',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'quartercount3',
                    title: '第3季度',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'quartercount4',
                    title: '第4季度',
                    align: 'center', // 居中显示
                    width: 400,
                });
            }
        } else if (type === '3') {
            if(param2 !=='0'){
                columns.push({
                    field: 'month'+param2,
                    title: param2+'月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
            }else {
                columns.push({
                    field: 'month1',
                    title: '1月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month2',
                    title: '2月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month3',
                    title: '3月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month4',
                    title: '4月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month5',
                    title: '5月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month6',
                    title: '6月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month7',
                    title: '7月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month8',
                    title: '8月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month9',
                    title: '9月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month10',
                    title: '10月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month11',
                    title: '11月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
                columns.push({
                    field: 'month12',
                    title: '12月份',
                    align: 'center', // 居中显示
                    width: 400,
                });
            }

        } else if (type === '4') {
            columns.push({
                field: 'dateinterval',
                title: param1+'至'+param2,
                align: 'center', // 居中显示
                width: 400,
            });
        }
        getTable(columns,param1,param2,type);
    }

    function getTable(columns,param1,param2,type) {
        $('#table').bootstrapTable({
            method: 'get',
            url: 'getDeptCounts_Ajax.jsp',
            cache: true, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            async: false,
            striped: true, //是否显示行间隔色
            pageNumber: 1, //初始化加载第一页
            pagination: true,//是否分页
            sidePagination: 'client',//server:服务器端分页|client：前端分页
            pageSize: 10,//单页记录数
            pageList: [10, 50],//可选择单页记录数
            showRefresh: false,//刷新按钮
            showExport: true,//显示导出按钮
            exportDataType: "all",//导出类型
            exportTypes: ['excel','xlsx'],
            queryParams: function (params) {//上传服务器的参数
                var param = {
                    params1: param1, // 请求时向服务端传递的参数
                    params2: param2, // 请求时向服务端传递的参数
                    type:type
                };
                return param;
            },
            columns: columns
        });
    }
</script>
<body>
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <!--统计类型-->
            <div class="col-xs-6 col-sm-3" style="display: block">
                <label>统计类型：</label>
                <label class="form-group" style="width: 150px">
                    <select id="selectType" class="selectpicker show-tick form-control" data-live-search="false">
                        <option value="1">年度</option>
                        <option value="2">季度</option>
                        <option value="3">月份</option>
                        <option value="4">日期</option>
                    </select>
                </label>
            </div>
            <!--年度-->
            <div class="col-xs-6 col-sm-3 form-inline" style="display: block" id="dataTable1">
                <label>年度：</label>
                <label class="form-group " style="width: 200px">
                    <label class='input-group date' id='datetimepicker'>
                        <input type='text' class="form-control" id="date" value="2022"/>
                        <span class="input-group-addon">
                              <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                    </label>
                </label>
            </div>
            <!--季度-->
            <div class="col-xs-6 col-sm-3" style="display: none" id="dataTable2">
                <label>季度：</label>
                <label class="form-group" style="width: 200px">
                    <select id="selectQuarter" class="selectpicker show-tick form-control"
                            data-live-search="false">
                        <option value="0">全部</option>
                        <option value="1">第1季度</option>
                        <option value="2">第2季度</option>
                        <option value="3">第3季度</option>
                        <option value="4">第4季度</option>
                    </select>
                </label>
            </div>
            <!--月份-->
            <div class="col-xs-6 col-sm-3" style="display: none" id="dataTable3">
                <label>月份</label>
                <label class="form-group" style="width: 200px">
                    <select id="selectMonth" class="selectpicker show-tick form-control"
                            data-live-search="false">
                        <option value="0">全部</option>
                        <option value="1">1月份</option>
                        <option value="2">2月份</option>
                        <option value="3">3月份</option>
                        <option value="4">4月份</option>
                        <option value="5">5月份</option>
                        <option value="6">6月份</option>
                        <option value="7">7月份</option>
                        <option value="8">8月份</option>
                        <option value="9">9月份</option>
                        <option value="10">10月份</option>
                        <option value="11">11月份</option>
                        <option value="12">12月份</option>
                    </select>
                </label>
            </div>
            <!--日期-->
            <div class="col-xs-6 col-sm-6 form-inline" style="display: none" id="dataTable4">
                <label>日期：</label>
                <label class="form-group" style="width: 200px">
                    <label class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" id="date1" value=""/>
                        <span class="input-group-addon">
                              <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                    </label>
                </label>
                <label>至</label>
                <label class="form-group" style="width: 200px">
                    <label class='input-group date' id='datetimepicker2'>
                        <input type='text' class="form-control" id="date2" value=""/>
                        <span class="input-group-addon">
                              <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                    </label>
                </label>
            </div>
            <div class="col-xs-6 col-sm-3" style="display: block">
                <button id="search-button" class="btn btn-primary">查询</button>
            </div>


        </div>
        <table id="table" style="width: 100%;"></table>
    </div>
</div>

</body>
</html>